<template>
  <div
    class="roiton-dark"
    data-spy="scroll"
    data-target="#scrollspy"
    data-offset="61"
  >
    <div id="page-content" class="page-content demo-02">
      <Header :loginState="'toLogin'"></Header>
      <Reload></Reload>
      <!-- HERO
            ============================================= -->
      <section id="hero-03" class="hero full-screen py-6">
        <div class="hero-center">
          <div class="container">
            <div class="row align-items-center">
              <!-- HERO TEXT -->
              <div class="col-lg-12 text-center">
                <div class="hero-txt">
                  <div>
                    <!-- Title -->
                    <h1 class="font-weight-bold">个人空间</h1>
                    <!-- Text -->
                    <h5 class="text-capitalize">
                      <span>养生有道，健康有方</span>
                      <!-- <span
                        class="element second-color"
                        data-elements=""
                      ></span> -->
                    </h5>
                    <h5 class="py-3">
                      Attract more visitors, and win more business with Roiton
                      template.
                    </h5>
                  </div>
                  <!-- Buttons -->
                  <!-- <div class="hero-btns">
                                    <a href="#services-02" class="btn ">
                                        <span>Get Started</span>
                                    </a>
                                    <a href="portfolio-2-grid-03.html" class="btn btn-white  ml-2">
                                        <span>View Projects</span>
                                    </a>
                                </div> -->
                </div>
              </div>
              <!-- END HERO TEXT -->
            </div>
            <!-- End row -->
          </div>
          <!-- End container -->
        </div>
        <!-- END HERO-CENTER -->
      </section>
      <!-- END HERO -->

      <!-- SERVICES
            ============================================= -->
      <section id="services-02" class="py-6">
        <div class="container">
          <!-- Title -->
          <div class="section-title text-center">
            <h3 class="sub-title base-color mb-2">Our Services</h3>
            <h2 class="title text-dark">
              Provide Awesome Service With Our Tools
            </h2>
          </div>

          <div class="row mt-5">
            <!-- Item 01 -->
            <div
              class="col-lg-3 col-md-6 mt-4 wow fadeInUp"
              data-wow-duration="1.25s"
            >
              <div class="serviceBox">
                <div class="service-icon my-4">
                  <i class="lni-laptop"></i>
                </div>
                <h5>关注</h5>
                <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam arcu. Proin nunc. 
                            </p> -->
              </div>
            </div>

            <!-- Item 02 -->
            <div
              class="col-lg-3 col-md-6 mt-4 text-md-left wow fadeInUp"
              data-wow-duration="1.5s"
            >
              <div class="serviceBox">
                <div class="service-icon my-4">
                  <i class="lni-bar-chart"></i>
                </div>
                <h5>粉丝</h5>
                <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam arcu. Proin nunc.
                            </p> -->
              </div>
            </div>

            <!-- Item 03 -->
            <div
              class="col-lg-3 col-md-6 mt-4 text-md-left wow fadeInUp"
              data-wow-duration="1.75s"
            >
              <div class="serviceBox">
                <div class="service-icon my-4">
                  <i class="lni-code"></i>
                </div>
                <h5>发表</h5>
                <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam arcu. Proin nunc. 
                            </p> -->
              </div>
            </div>

            <!-- Item 04 -->
            <div
              class="col-lg-3 col-md-6 mt-4 text-md-left wow fadeInUp"
              data-wow-duration="2s"
            >
              <div class="serviceBox">
                <div class="service-icon my-4">
                  <i class="lni-user"></i>
                </div>
                <h5>评论</h5>
                <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam arcu. Proin nunc.
                            </p> -->
              </div>
            </div>
          </div>
        </div>
        <!-- End container -->
      </section>
      <!-- END SERVICES -->

      <!-- ABOUT
            ============================================= -->
      <!-- <section id="about" class="about py-6">
            <div class="container">


                <div class="row align-items-center">

                    <div class="col-lg-6 mb-4 mb-lg-0">
                        
                        <div class="section-title">
                            <h3 class="sub-title  mb-2">About Us</h3>
                            <h2 class="title">WE BRING THE BEST THINGS FOR YOU </h2>
                        </div>

                       
                        <p class="text-muted my-3">Yuroin non lorem ac erat suscipit bibendum. Nulla facilisi. Sedeuter
                            nunte
                            volutpat, mollis sapien vel,conseyer turpeutionyer massa in libero sempe.
                            Fusce mollis augue sit amet hendrerit vestibulum. Duisteyerionyer venenatis
                            lacus mollis augue sit amet hendrerit vestibulum.
                        </p>

                        <div id="count-up" class="count-up row text-left">

                            
                            <div class="col-sm-6 mt-5 mt-lg-0 mb-md-0 count-item">
                                <div class="count-content">
                                    <span class="timer count-number" data-from="0" data-to="286"
                                        data-speed="5000">286</span>
                                </div>
                                <p class="mb-0 ">Files Download</p>
                            </div>

                            
                            <div class="col-sm-6 mt-5  mt-lg-0 mb-md-0 count-item">
                                <div class="count-content">
                                    <span class="timer count-number" data-from="0" data-to="6549"
                                        data-speed="5000">6549</span>
                                </div>
                                <p class="mb-0">Project Done</p>
                            </div>

                            
                            <div class="col-sm-6 mt-5  mt-lg-0 mb-md-0 count-item">
                                <div class="count-content">
                                    <span class="timer count-number" data-from="0" data-to="793"
                                        data-speed="5000">793</span>
                                </div>
                                <p class="mb-0">Get Award</p>
                            </div>

                           
                            <div class="col-sm-6 mt-5  mt-lg-0 mb-md-0 count-item">
                                <div class="count-content">
                                    <span class="timer count-number" data-from="0" data-to="286"
                                        data-speed="5000">286</span>
                                </div>
                                <p class="mb-0">Happy Client</p>
                            </div>

                        </div> 

                    </div>

                    <div class="col-lg-6">
                        <img src="../assets/img/about-02.jpg" alt="/" class="w-100">
                    </div>
                </div> 


            </div> 
        </section> -->

      <!-- PORTFOLIO
            ============================================= -->
      <section id="portfolio" class="portfolio py-6">
        <div class="container">
          <!-- Title -->
          <div class="section-title text-center">
            <h3 class="sub-title base-color mb-2">收藏</h3>
            <h2 class="title text-dark">收藏文章</h2>
          </div>

          <div class="row mt-5">
            <!--   Portfolio Filters   -->
            <ul
              id="portfolio-filter"
              class="list-unstyled list-inline mb-0 col-lg-12 text-center portfolio-filter"
            >
              <li class="list-inline-item">
                <a href="#" data-filter="*" class="active my-1">All</a>
              </li>
              <li class="list-inline-item">
                <a href="#" data-filter=".webdesign" class="my-1">Web Design</a>
              </li>
              <li class="list-inline-item">
                <a href="#" data-filter=".mobiledesign" class="my-1"
                  >Mobile Design</a
                >
              </li>
              <li class="list-inline-item">
                <a href="#" data-filter=".seo" class="my-1">Seo</a>
              </li>
              <li class="list-inline-item">
                <a href="#" data-filter=".graphic" class="my-1">Graphic</a>
              </li>
            </ul>
          </div>
          <div class="portfolio-items row mt-4">
            <!-- Item 01 -->
            <div class="col-md-6 portfolio-item seo">
              <div class="portfolio-item-content box">
                <img
                  src="../assets/img/portfolio/portfolio-detail-01.jpg"
                  alt="/"
                />
                <div class="box-content">
                  <h6>
                    <a href="portfolio-detail-03.html">art & illustration</a>
                  </h6>
                  <h4>
                    <a href="portfolio-detail-03.html">Inspiring new space.</a>
                  </h4>
                </div>
                <ul class="icon">
                  <li>
                    <a
                      href="./img/portfolio/portfolio-detail-01.jpg"
                      class="js-zoom-gallery"
                      ><i class="lni-search"></i
                    ></a>
                  </li>
                  <li>
                    <a href="portfolio-detail-03.html"
                      ><i class="lni-link"></i
                    ></a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- Item 02 -->
            <div class="col-md-6 portfolio-item graphic">
              <div class="portfolio-item-content box">
                <img
                  src="../assets/img/portfolio/portfolio-detail-02.jpg"
                  alt="/"
                />
                <div class="box-content">
                  <h6>
                    <a href="portfolio-detail-03.html">art & illustration</a>
                  </h6>
                  <h4>
                    <a href="portfolio-detail-03.html">Inspiring new space.</a>
                  </h4>
                </div>
                <ul class="icon">
                  <li>
                    <a
                      href="./img/portfolio/portfolio-detail-02.jpg"
                      class="js-zoom-gallery"
                      ><i class="lni-search"></i
                    ></a>
                  </li>
                  <li>
                    <a href="portfolio-detail-03.html"
                      ><i class="lni-link"></i
                    ></a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- Item 03 -->
            <div class="col-md-6 portfolio-item webdesign graphic">
              <div class="portfolio-item-content box">
                <img
                  src="../assets/img/portfolio/portfolio-detail-03.jpg"
                  alt="/"
                />
                <div class="box-content">
                  <h6>
                    <a href="portfolio-detail-03.html">art & illustration</a>
                  </h6>
                  <h4>
                    <a href="portfolio-detail-03.html">Inspiring new space.</a>
                  </h4>
                </div>
                <ul class="icon">
                  <li>
                    <a
                      href="./img/portfolio/portfolio-detail-03.jpg"
                      class="js-zoom-gallery"
                      ><i class="lni-search"></i
                    ></a>
                  </li>
                  <li>
                    <a href="portfolio-detail-03.html"
                      ><i class="lni-link"></i
                    ></a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- Item 04 -->
            <div class="col-md-6 portfolio-item mobiledesign">
              <div class="portfolio-item-content box">
                <img
                  src="../assets/img/portfolio/portfolio-detail-04.jpg"
                  alt="/"
                />
                <div class="box-content">
                  <h6>
                    <a href="portfolio-detail-03.html">art & illustration</a>
                  </h6>
                  <h4>
                    <a href="portfolio-detail-03.html">Inspiring new space.</a>
                  </h4>
                </div>
                <ul class="icon">
                  <li>
                    <a
                      href="./img/portfolio/portfolio-detail-04.jpg"
                      class="js-zoom-gallery"
                      ><i class="lni-search"></i
                    ></a>
                  </li>
                  <li>
                    <a href="portfolio-detail-03.html"
                      ><i class="lni-link"></i
                    ></a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- Item 05 -->
            <div class="col-md-6 portfolio-item mobiledesign seo">
              <div class="portfolio-item-content box">
                <img
                  src="../assets/img/portfolio/portfolio-img-05.png"
                  alt="/"
                />
                <div class="box-content">
                  <h6>
                    <a href="portfolio-detail-03.html">art & illustration</a>
                  </h6>
                  <h4>
                    <a href="portfolio-detail-03.html">Inspiring new space.</a>
                  </h4>
                </div>
                <ul class="icon">
                  <li>
                    <a
                      href="./img/portfolio/portfolio-img-05.png"
                      class="js-zoom-gallery"
                      ><i class="lni-search"></i
                    ></a>
                  </li>
                  <li>
                    <a href="portfolio-detail-03.html"
                      ><i class="lni-link"></i
                    ></a>
                  </li>
                </ul>
              </div>
            </div>
            <!-- Item 06 -->
            <div class="col-md-6 portfolio-item mobiledesign">
              <div class="portfolio-item-content box">
                <img
                  src="../assets/img/portfolio/portfolio-img-06.png"
                  alt="/"
                />
                <div class="box-content">
                  <h6>
                    <a href="portfolio-detail-03.html">art & illustration</a>
                  </h6>
                  <h4>
                    <a href="portfolio-detail-03.html">Inspiring new space.</a>
                  </h4>
                </div>
                <ul class="icon">
                  <li>
                    <a
                      href="./img/portfolio/portfolio-img-06.png"
                      class="js-zoom-gallery"
                      ><i class="lni-search"></i
                    ></a>
                  </li>
                  <li>
                    <a href="portfolio-detail-03.html"
                      ><i class="lni-link"></i
                    ></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- End container -->
      </section>
      <!-- END PORTFOLIO -->

      <!-- TESTIMONIAL
            ============================================= -->
      <div id="testimonial" class="testimonial testimonial-02 py-6 text-center">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-lg-12">
              <div class="owl-carousel py-5">
                <!-- Item 01 -->
                <div class="testimonial-item">
                  <p>
                    " In a professional context it often happens that private or
                    corporate clients corder a publication to be made and
                    presented with the actual content still not being ready. "
                  </p>
                  <div>
                    <img
                      src="../assets/img/client/client-01.png"
                      class="m-auto rounded"
                      alt="/"
                    />
                  </div>
                  <p class="mt-3 font-weight-bold">
                    -Jone Doe,
                    <span class="d-block">Seo Manager</span>
                  </p>
                </div>

                <!-- Item 02 -->
                <div class="testimonial-item">
                  <p>
                    " In a professional context it often happens that private or
                    corporate clients corder a publication to be made and
                    presented with the actual content still not being ready. "
                  </p>
                  <div>
                    <img
                      src="../assets/img/client/client-02.png"
                      class="m-auto rounded"
                      alt="/"
                    />
                  </div>
                  <p class="mt-3 font-weight-bold">
                    -Jessy Doe,
                    <span class="d-block">UI Designer</span>
                  </p>
                </div>

                <!-- Item 03 -->
                <div class="testimonial-item">
                  <p>
                    " In a professional context it often happens that private or
                    corporate clients corder a publication to be made and
                    presented with the actual content still not being ready. "
                  </p>
                  <div>
                    <img
                      src="../assets/img/client/client-03.png"
                      class="m-auto rounded"
                      alt="/"
                    />
                  </div>
                  <p class="mt-3 font-weight-bold">
                    -Jully Doe,
                    <span class="d-block">UX Designer</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End container -->
      </div>
      <!-- END TESTIMONIAL -->

      <!-- PRICE
            ============================================= -->
      <section id="price-02" class="py-6 bg-light">
        <div class="container">
          <!-- Title -->
          <div class="section-title text-center">
            <h3 class="sub-title base-color mb-2">Pricing Plan</h3>
            <h2 class="title text-dark">Choose your Plan</h2>
          </div>

          <div class="row">
            <div class="col-md-4 col-sm-6">
              <div class="pricingTable">
                <div class="pricingTable-header">
                  <h3 class="title">Standard</h3>
                  <span class="price-value">$10</span>
                </div>
                <ul class="pricing-content">
                  <li>50GB Disk Space</li>
                  <li>50 Email Accounts</li>
                  <li>50GB Monthly Bandwidth</li>
                  <li>10 Subdomains</li>
                  <li>15 Domains</li>
                </ul>
                <a href="#" class="pricingTable-signup">Sign Up</a>
              </div>
            </div>
            <div class="col-md-4 col-sm-6">
              <div class="pricingTable">
                <div class="pricingTable-header">
                  <h3 class="title">Business</h3>
                  <span class="price-value">$20</span>
                </div>
                <ul class="pricing-content">
                  <li>60GB Disk Space</li>
                  <li>60 Email Accounts</li>
                  <li>60GB Monthly Bandwidth</li>
                  <li>15 Subdomains</li>
                  <li>20 Domains</li>
                </ul>
                <a href="#" class="pricingTable-signup">Sign Up</a>
              </div>
            </div>
            <div class="col-md-4 col-sm-6">
              <div class="pricingTable">
                <div class="pricingTable-header">
                  <h3 class="title">Standard</h3>
                  <span class="price-value">$10</span>
                </div>
                <ul class="pricing-content">
                  <li>50GB Disk Space</li>
                  <li>50 Email Accounts</li>
                  <li>50GB Monthly Bandwidth</li>
                  <li>10 Subdomains</li>
                  <li>15 Domains</li>
                </ul>
                <a href="#" class="pricingTable-signup">Sign Up</a>
              </div>
            </div>
          </div>
        </div>
        <!-- End container -->
      </section>
      <!-- END PRICE -->

      <!-- TEAM
            ============================================= -->
      <!-- <section id="team" class="team-02 py-6">
            <div class="container">

                
                <div class="section-title text-center">
                    <h3 class="sub-title base-color mb-2">Team Member</h3>
                    <h2 class="title text-dark">Our Passionate People </h2>
                </div>

                <div class="row mt-5">
                    <div class="col-lg-4 col-md-6 mt-4">
                        <div class="our-team">
                            <img src="../assets/img/team/team-01.jpg" alt="/">
                            <div class="team-content">
                                <h3 class="team-prof">
                                    Williamson
                                    <small>Web designer</small>
                                </h3>
                                <ul class="social-link">
                                    <li><a href="#" class="lni-facebook-filled"></a></li>
                                    <li><a href="#" class="lni-google-plus"></a></li>
                                    <li><a href="#" class="lni-twitter-filled"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 mt-4">
                        <div class="our-team">
                            <img src="../assets/img/team/team-02.jpg" alt="/">
                            <div class="team-content">
                                <h3 class="team-prof">
                                    Williamson
                                    <small>Web designer</small>
                                </h3>
                                <ul class="social-link">
                                    <li><a href="#" class="lni-facebook-filled"></a></li>
                                    <li><a href="#" class="lni-google-plus"></a></li>
                                    <li><a href="#" class="lni-twitter-filled"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 mt-4">
                        <div class="our-team">
                            <img src="../assets/img/team/team-03.jpg" alt="/">
                            <div class="team-content">
                                <h3 class="team-prof">
                                    Williamson
                                    <small>Web designer</small>
                                </h3>
                                <ul class="social-link">
                                    <li><a href="#" class="lni-facebook-filled"></a></li>
                                    <li><a href="#" class="lni-google-plus"></a></li>
                                    <li><a href="#" class="lni-twitter-filled"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </section>  -->

      <!-- CONTACT
            ============================================= -->
      <!-- <section id="contact-02" class="contact contact-02 bg-light py-6">
            <div class="container">

                
                <div class="section-title text-center">
                    <h3 class="sub-title base-color mb-2">Get In Touch</h3>
                    <h2 class="title text-dark">Get Started 20 Days Free Trial!</h2>
                </div>


                <div class="row mt-5 contact-container">

                    <div class="col-lg-8 mx-auto text-md-left ">
                        <div class="col-lg-12 contact-form">

                            <form id="contactForm" class="form mt-2">
                                <div class="row">
                                    <div class="col-lg-12 form-item">
                                        <div class="form-group">
                                            <p>Name</p>
                                            <input name="name" id="name" type="text" class="form-control"
                                                placeholder="Your Name*" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 form-item">
                                        <div class="form-group">
                                            <p>Email</p>
                                            <input name="email" id="email" type="email" class="form-control"
                                                placeholder="Your Email*" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 text-left">
                                        <button type="button" class="btn" id="submit-btn" onClick="sendEmail()">Start
                                            Your Free Trial</button>
                                        <div id="message" class="toast shadow-none main-btn bg-transparent" role="alert"
                                            aria-live="assertive" aria-atomic="true" data-delay="4000">
                                            <div class="toast-body d-inline-block"></div>
                                            <button type="button" class="pr-3 close" data-dismiss="toast"
                                                aria-label="Close">
                                                <span aria-hidden="true" class="lni-close"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>


                        </div>
                    </div>

                </div>

            </div>
        </section> -->

      <!-- BLOG
            ============================================= -->
      <section id="blog" class="blog blog-02 py-6">
        <div class="container">
          <!-- Title -->
          <div class="section-title text-center">
            <h3 class="sub-title base-color mb-2">推荐</h3>
            <h2 class="title text-dark">论坛文章</h2>
          </div>

          <div class="row mt-5">
            <!-- Item 01 -->
            <div
              class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
              data-wow-duration="1.25s"
            >
              <!-- BLOG POST IMAGE -->
              <div class="rounded blog-item">
                <div class="image-blog">
                  <img
                    src="../assets/img/blog/blog-01.jpg"
                    alt="/"
                    class="rounded-top"
                  />
                </div>

                <div class="rounded-bottom blog-content p-4 text-center">
                  <div class="blog-section-author">
                    <span> Posted by:<a href="#"> Admin </a> </span>
                    |
                    <span> 25th June, 2021</span>
                  </div>

                  <h5>
                    <a
                      href="blog-single-03.html"
                      target="_blank"
                      class="text-dark"
                      >How to become a successful businessman.</a
                    >
                  </h5>
                  <div class="blog-link mt-4">
                    <a
                      class="btn btn-purple btn-sm"
                      href="blog-single-03.html"
                      target="_blank"
                      >Read More</a
                    >
                  </div>
                </div>
              </div>
            </div>

            <!-- Item 02 -->
            <div
              class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
              data-wow-duration="1.25s"
              data-wow-delay="0.1s"
            >
              <!-- BLOG POST IMAGE -->
              <div class="rounded blog-item">
                <div class="image-blog">
                  <img
                    src="../assets/img/blog/blog-02.jpg"
                    alt="/"
                    class="rounded-top"
                  />
                </div>
                <div class="rounded-bottom blog-content p-4 text-center">
                  <div class="blog-section-author">
                    <span> Posted by:<a href="#"> Admin </a> </span>
                    |
                    <span> 25th June, 2021</span>
                  </div>

                  <h5>
                    <a
                      href="blog-single-03.html"
                      target="_blank"
                      class="text-dark"
                      >5 Tips to help you learn UI/UX in web design</a
                    >
                  </h5>
                  <div class="blog-link mt-4">
                    <a
                      class="btn btn-purple btn-sm"
                      href="blog-single-03.html"
                      target="_blank"
                      >Read More</a
                    >
                  </div>
                </div>
              </div>
            </div>

            <!-- Item 03 -->
            <div
              class="col-lg-4 col-md-6 mt-4 wow fadeInUp"
              data-wow-duration="1.25s"
              data-wow-delay="0.3s"
            >
              <!-- BLOG POST IMAGE -->
              <div class="rounded blog-item">
                <div class="image-blog">
                  <img
                    src="../assets/img/blog/blog-03.jpg"
                    alt="/"
                    class="rounded-top"
                  />
                </div>
                <div class="rounded-bottom blog-content p-4 text-center">
                  <div class="blog-section-author">
                    <span> Posted by:<a href="#"> Admin </a> </span>
                    |
                    <span> 25th June, 2021</span>
                  </div>

                  <h5>
                    <a
                      href="blog-single-03.html"
                      target="_blank"
                      class="text-dark"
                      >The difference between UX and UI design</a
                    >
                  </h5>
                  <div class="blog-link mt-4">
                    <a
                      class="btn btn-purple btn-sm"
                      href="blog-single-03.html"
                      target="_blank"
                      >Read More</a
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- <div class="more-blogs text-center mt-5">
                        <a href="blog.html" class="pill-button" target="_blank">View more blogs</a>
                    </div> -->
        </div>
        <!-- End container -->
      </section>
      <!-- END BLOG -->

      <!-- FOOTER
            ============================================= -->
      <footer id="footer" class="container-fluid pt-6 bg-dark footer-02">
        <!-- FOOTER CONTENT -->
        <div class="row">
          <div class="container">
            <div class="row footer-section">
              <!-- FOOTER Roiton-INFO -->
              <div class="col-lg-3 col-md-6">
                <div class="footer-section-logo">
                  <!-- Title -->
                  <a href="index-03.html">
                    <h3 class="base-color">Roiton</h3>
                  </a>

                  <!-- Text -->
                  <p>
                    sed diam nonummy nibh euismod tincidunt aliquam erat
                    volutpat.
                  </p>
                  <p>
                    Lorem ipsum dolor nibh euismod tincidunt sit amet adipiscing
                    elit, ut laoreet dolore magna aliquam erat volutpat.
                  </p>
                </div>
              </div>
              <!-- END FOOTER Roiton-INFO -->

              <!-- FOOTER INFO -->
              <div class="col-lg-3 col-md-6">
                <div class="footer-section-information">
                  <!-- Title -->
                  <h4>Contact Us</h4>
                  <!-- Text -->
                  <p>Lorem ipsum dolor sit amet, consectetuer sed volutpat.</p>

                  <ul>
                    <li>
                      <span class="base-color lni-map-marker"></span>NewYork,
                      United State
                    </li>
                    <li>
                      <span class="base-color lni-phone"></span>+123-4567-890
                    </li>
                    <li>
                      <span class="base-color lni-envelope"></span
                      ><a href="mailto:" class="text-dark"
                        ><span
                          class="__cf_email__"
                          data-cfemail="0a796b677a666f4a796b677a666f24696567"
                          >[email&#160;protected]</span
                        ></a
                      >
                    </li>
                  </ul>
                </div>
              </div>
              <!-- END FOOTER INFO -->

              <!-- FOOTER NEWSLETTER FORM -->
              <div class="col-lg-3 col-md-6">
                <div class="footer-section-newsletter">
                  <!-- Title -->
                  <h4>Subscribe Us</h4>

                  <!-- Text -->
                  <p>
                    Stay up to date with our latest news, updates and our new
                    products!
                  </p>

                  <form action="#" method="get">
                    <button class="newsletter-btn" type="submit">
                      <i class="lni-envelope text-white"></i>
                    </button>
                    <input
                      class="newsletter"
                      type="text"
                      placeholder="mail@example.com"
                    />
                  </form>
                </div>
              </div>
              <!-- END FOOTER NEWSLETTER FORM -->

              <!-- FOOTER SOCIAL LINKS -->
              <div class="col-lg-3 col-md-6">
                <div class="footer-section-information">
                  <!-- Title -->
                  <h4>Social Links</h4>

                  <!-- Text -->
                  <p>
                    Join our mailing list to stay up to date and get notices
                    about our new releases!
                  </p>

                  <ul class="social-link list-inline">
                    <li>
                      <a href="#"><i class="lni-facebook-filled"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="lni-twitter-filled"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="lni-google-plus"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="lni-instagram-filled"></i></a>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- END SOCIAL LINKS -->
            </div>
          </div>
          <!-- End container -->
        </div>
        <!-- END FOOTER CONTENT -->

        <!-- FOOTER COPYRIGHT -->
        <div class="row footer-copy-right">
          <div class="container">
            <div class="row border-top">
              <div class="col-sm-8 footer-copy-right-text">
                <a href="index-03.html" class="base-color">Roiton</a> ©
                CopyRights 2021 All Rights Reserved &ndash; By
              </div>
            </div>
          </div>
        </div>
        <!-- END FOOTER COPYRIGHT -->
      </footer>
      <!-- END FOOTER -->
      <ReturnTop></ReturnTop>
    </div>
  </div>
</template>

<script>
// 组件
import Header from "../components/Header.vue";
import ReturnTop from "../components/ReturnTop.vue";
import Reload from "../components/Reload.vue";

// import isotope  from "isotope-layout";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
  components: {
    Header,
    ReturnTop,
    Reload,
  },
};
</script>

<style>
</style>
